<template>
    <yd-layout>
        <yd-navbar slot="navbar" :title="title">
            
        </yd-navbar>
        <router-view>{{pageLoading}}</router-view>
        <yd-tabbar slot="tabbar" fixed >
            <yd-tabbar-item :title="menuitem.text" :link="menuitem.link" :active="menuitem.active==true?true:false" v-for="menuitem in menuslist" :key="menuitem.id" @click.native="tabClick(menuitem.id)">
                <yd-icon :name="menuitem.icon" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>
    </yd-layout>
</template>

<script type="text/babel">
// 定义菜单
let menuslist = [
    {id: 0, text: '首页', link: '/Home/ylogin', active: false, icon: 'home'},
    {id: 1, text: 'form表单验证', link: '/Home/form', active: false, icon: 'shopcart'},
    {id: 2, text: '个人中心', link: '/Home/MyInfo', active: false, icon: 'ucenter-outline'}
]

export default {
  name: 'Home',
  data () {
    return {
      menuslist: menuslist,
      title: ''
    }
  },
  mounted: function () {
    let routeLink = this.$route.path
    let routeTemp = ''
    let routeSlash = routeLink.substring(routeLink.length - 1, routeLink.length)
    if (routeSlash === '/') {
      routeTemp = routeLink.substring(0, routeLink.length - 1)
    }
    // 设置初始化菜单选中
    menuslist.forEach((item, index) => {
      if (routeTemp === item.link) {
        routeLink = routeTemp
      }
      if (routeLink === item.link) {
        item.active = true
        this.title = item.text
      } else {
        item.active = false
      }
    })
  },
  methods: {
    // 点击菜单选中效果
    tabClick (i) {
      menuslist.forEach((item, index) => {
        if (i === index) {
          item.active = true
          this.title = item.text
        } else {
          item.active = false
        }
      })
    }
  },
  computed: {
    pageLoading() {
      // console.log(this.$store.state.isLoading)
      console.log('pageLoading... 载入状态准备停止/开启' + this.$store.state.pageLoading)
      if (this.$store.state.pageLoading) {
        this.$dialog.loading.open('页面加载中...')
        console.log('页面加载开启')
      } else {
        // setTimeout(() => {
        this.$dialog.loading.close()
          // console.log('页面加载关闭')
        // }, 2000);
      }
      return this.$store.state.pageLoading
    }
  }
}
</script>